<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Carousel</h1>
        <p>Carousel is a content slider featuring various customization options.</p>
    </div>
    <app-demoActions github="carousel" stackblitz="carousel-demo"></app-demoActions>
</div>

<div class="content-section implementation carousel-demo">
    <div class="card">
        <p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions">
            <ng-template pTemplate="header">
                <h5>Basic</h5>
            </ng-template>
            <ng-template let-product pTemplate="item">
                <div class="product-item">
                    <div class="product-item-content">
                        <div class="mb-3">
                            <img src="assets/showcase/images/demo/product/{{product.image}}" [alt]="product.name" class="product-image" />
                        </div>
                        <div>
                            <h4 class="mb-1">{{product.name}}</h4>
                            <h6 class="mt-0 mb-3">${{product.price}}</h6>
                            <span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
                            <div class="car-buttons mt-5">
                                <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
                                <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
                                <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
        </p-carousel>
    </div>
    <div class="card">
        <p-carousel [value]="products" styleClass="custom-carousel" [numVisible]="3" [numScroll]="1" [circular]="true" [autoplayInterval]="3000" [responsiveOptions]="responsiveOptions">
            <ng-template pTemplate="header">
                <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
            </ng-template>
            <ng-template let-product pTemplate="item">
                <div class="product-item">
                    <div class="product-item-content">
                        <div class="mb-3">
                            <img src="assets/showcase/images/demo/product/{{product.image}}" [alt]="product.name" class="product-image" />
                        </div>
                        <div>
                            <h4 class="mb-1">{{product.name}}</h4>
                            <h6 class="mt-0 mb-3">${{product.price}}</h6>
                            <span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
                            <div class="car-buttons mt-5">
                                <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
                                <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
                                <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
        </p-carousel>
    </div>
    <div class="card">
        <p-carousel [value]="products" orientation="vertical" [style]="{'max-width':'400px', 'margin-top':'2em'}" verticalViewPortHeight="352px" [numVisible]="1" [numScroll]="1">
            <ng-template pTemplate="header">
                <h5>Vertical</h5>
            </ng-template>
            <ng-template let-product pTemplate="item">
                <div class="product-item">
                    <div class="product-item-content">
                        <div class="mb-3">
                            <img src="assets/showcase/images/demo/product/{{product.image}}" [alt]="product.name" class="product-image" />
                        </div>
                        <div>
                            <h4 class="mb-1">{{product.name}}</h4>
                            <h6 class="mt-0 mb-3">${{product.price}}</h6>
                            <span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
                            <div class="car-buttons mt-5">
                                <p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"></p-button>
                                <p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></p-button>
                                <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
        </p-carousel>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
                    <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;CarouselModule&#125; from 'primeng/carousel';
</app-code>

            <h5>Getting Started</h5>
            <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-carousel [value]="cars"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Content to display
    &lt;/ng-template&gt;
&lt;/p-carousel&gt;
</app-code>
            <h5>Items Per Page and Scroll Items</h5>
            <p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-carousel [value]="cars" [numVisible]="3" [numScroll]="1"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Content to display
    &lt;/ng-template&gt;
&lt;/p-carousel&gt;
</app-code>

            <h5>Responsive</h5>
            <p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of objects whose breakpoint defines the max-width to apply the settings.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-carousel [value]="cars" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Content to display
    &lt;/ng-template&gt;
&lt;/p-carousel&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class CarouselDemo &#123;
    constructor(private carService: CarService) &#123;
        this.responsiveOptions = [
            &#123;
                breakpoint: '1024px',
                numVisible: 3,
                numScroll: 3
            &#125;,
            &#123;
                breakpoint: '768px',
                numVisible: 2,
                numScroll: 2
            &#125;,
            &#123;
                breakpoint: '560px',
                numVisible: 1,
                numScroll: 1
            &#125;
        ];
    &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => &#123;
            this.cars = cars
        &#125;);
    &#125;
&#125;
</app-code>

            <h5>Header and Footer</h5>
            <p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-carousel [value]="cars"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;h5&gt;Vertical&lt;/h5&gt;
    &lt;/ng-template&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Content to display
    &lt;/ng-template&gt;
&lt;/p-carousel&gt;
</app-code>

<h5>Orientation</h5>
<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-carousel [value]="cars" orientation="vertical"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Content to display
    &lt;/ng-template&gt;
&lt;/p-carousel&gt;
</app-code>

            <h5>AutoPlay and Circular</h5>
            <p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-carousel [value]="cars" [autoplayInterval]="3000" [circular]="true"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;h5&gt;Vertical&lt;/h5&gt;
    &lt;/ng-template&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Content to display
    &lt;/ng-template&gt;
&lt;/p-carousel&gt;
</app-code>
            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                    <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>value</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of objects to display.</td>
                        </tr>
                        <tr>
                            <td>page</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the first item.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>object</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the viewport container.</td>
                        </tr>
                        <tr>
                            <td>circular</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines if scrolling would be infinite.</td>
                        </tr>
                        <tr>
                            <td>showIndicators</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display indicator container.</td>
                        </tr>
                        <tr>
                            <td>showNavigators</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to display navigation buttons in container.</td>
                        </tr>
                        <tr>
                            <td>autoplayInterval</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Time in milliseconds to scroll items automatically.</td>
                        </tr>
                        <tr>
                            <td>numVisible</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Number of items per page.</td>
                        </tr>
                        <tr>
                            <td>numScroll</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Number of items to scroll.</td>
                        </tr>
                        <tr>
                            <td>responsiveOptions</td>
                            <td>any</td>
                            <td>null</td>
                            <td>An array of options for responsive design.</td>
                        </tr>
                        <tr>
                            <td>orientation</td>
                            <td>string</td>
                            <td>horizontal</td>
                            <td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
                        </tr>
                        <tr>
                            <td>verticalViewPortHeight</td>
                            <td>string</td>
                            <td>300px</td>
                            <td>Height of the viewport in vertical layout.</td>
                        </tr>
                        <tr>
                            <td>contentClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of main content.</td>
                        </tr>
                        <tr>
                            <td>indicatorsContentClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the paginator items.</td>
                        </tr>
                        <tr>
                            <td>indicatorsContentStyle</td>
                            <td>object</td>
                            <td>null</td>
                            <td>Style of the paginator items.</td>
                        </tr>
                        <tr>
                            <td>indicatorStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the indicators.</td>
                        </tr>
                        <tr>
                            <td>indicatorStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style of the indicators.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                    <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onPage</td>
                            <td>event.page = Value of the new page.</td>
                            <td>Callback to invoke after scroll.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>header</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>item</td>
                            <td>$implicit: Data of the item</td>
                        </tr>
                        <tr>
                            <td>footer</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-carousel</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-carousel-header</td>
                            <td>Header section.</td>
                        </tr>
                        <tr>
                            <td>p-carousel-footer</td>
                            <td>Footer section.</td>
                        </tr>
                        <tr>
                            <td>p-carousel-content</td>
                            <td>Main content element. It contains the container of the viewport.</td>
                        </tr>
                        <tr>
                            <td>p-carousel-container</td>
                            <td>Container of the viewport. It contains navigation buttons and viewport.</td>
                        </tr>
                        <tr>
                            <td>p-carousel-items-content</td>
                            <td>Viewport.</td>
                        </tr>
                        <tr>
                            <td>p-carousel-dots-container</td>
                            <td>Container of the paginator.</td>
                        </tr>
                        <tr>
                            <td>p-carousel-dot-item</td>
                            <td>Paginator element.</td>
                        </tr>
                        <tr>
                            <td>p-carousel-dot-icon</td>
                            <td>Paginator element icon.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/carousel" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-carousel-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="responsiveOptions"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;h5&gt;Basic&lt;/h5&gt;
    &lt;/ng-template&gt;
    &lt;ng-template let-product pTemplate="item"&gt;
        &lt;div class="product-item"&gt;
            &lt;div class="product-item-content"&gt;
                &lt;div class="mb-3"&gt;
                    &lt;img src="assets/showcase/images/demo/product/&#123;&#123;product.image&#125;&#125;" [alt]="product.name" class="product-image" /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;h4 class="mb-1"&gt;&#123;&#123;product.name&#125;&#125;&lt;/h4&gt;
                    &lt;h6 class="mt-0 mb-3"&gt;$&#123;&#123;product.price&#125;&#125;&lt;/h6&gt;
                    &lt;span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()"&gt;&#123;&#123;product.inventoryStatus&#125;&#125;&lt;/span&gt;
                    &lt;div class="car-buttons mt-5"&gt;
                        &lt;p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"&gt;&lt;/p-button&gt;
                        &lt;p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"&gt;&lt;/p-button&gt;
                        &lt;p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"&gt;&lt;/p-button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-carousel&gt;
&lt;p-carousel [value]="products" styleClass="custom-carousel" [numVisible]="3" [numScroll]="1" [circular]="true" [autoplayInterval]="3000" [responsiveOptions]="responsiveOptions"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;h5&gt;Circular, AutoPlay, 3 Items per Page and Scroll by 1&lt;/h5&gt;
    &lt;/ng-template&gt;
    &lt;ng-template let-product pTemplate="item"&gt;
        &lt;div class="product-item"&gt;
            &lt;div class="product-item-content"&gt;
                &lt;div class="mb-3"&gt;
                    &lt;img src="assets/showcase/images/demo/product/&#123;&#123;product.image&#125;&#125;" [alt]="product.name" class="product-image" /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;h4 class="mb-1"&gt;&#123;&#123;product.name&#125;&#125;&lt;/h4&gt;
                    &lt;h6 class="mt-0 mb-3"&gt;$&#123;&#123;product.price&#125;&#125;&lt;/h6&gt;
                    &lt;span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()"&gt;&#123;&#123;product.inventoryStatus&#125;&#125;&lt;/span&gt;
                    &lt;div class="car-buttons mt-5"&gt;
                        &lt;p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"&gt;&lt;/p-button&gt;
                        &lt;p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"&gt;&lt;/p-button&gt;
                        &lt;p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"&gt;&lt;/p-button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-carousel&gt;
&lt;p-carousel [value]="products" orientation="vertical" [style]="&#123;'max-width':'400px', 'margin-top':'2em'&#125;" verticalViewPortHeight="352px" [numVisible]="1" [numScroll]="1"&gt;
    &lt;ng-template pTemplate="header"&gt;
        &lt;h5&gt;Vertical&lt;/h5&gt;
    &lt;/ng-template&gt;
    &lt;ng-template let-product pTemplate="item"&gt;
        &lt;div class="product-item"&gt;
            &lt;div class="product-item-content"&gt;
                &lt;div class="mb-3"&gt;
                    &lt;img src="assets/showcase/images/demo/product/&#123;&#123;product.image&#125;&#125;" [alt]="product.name" class="product-image" /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;h4 class="mb-1"&gt;&#123;&#123;product.name&#125;&#125;&lt;/h4&gt;
                    &lt;h6 class="mt-0 mb-3"&gt;$&#123;&#123;product.price&#125;&#125;&lt;/h6&gt;
                    &lt;span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()"&gt;&#123;&#123;product.inventoryStatus&#125;&#125;&lt;/span&gt;
                    &lt;div class="car-buttons mt-5"&gt;
                        &lt;p-button type="button" styleClass="p-button p-button-rounded mr-2" icon="pi pi-search"&gt;&lt;/p-button&gt;
                        &lt;p-button type="button" styleClass="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"&gt;&lt;/p-button&gt;
                        &lt;p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"&gt;&lt;/p-button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-carousel&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class CarouselDemo &#123;

    products: Product[];

	responsiveOptions;

	constructor(private productService: ProductService) &#123;
		this.responsiveOptions = [
            &#123;
                breakpoint: '1024px',
                numVisible: 3,
                numScroll: 3
            &#125;,
            &#123;
                breakpoint: '768px',
                numVisible: 2,
                numScroll: 2
            &#125;,
            &#123;
                breakpoint: '560px',
                numVisible: 1,
                numScroll: 1
            &#125;
        ];
	&#125;

	ngOnInit() &#123;
		this.productService.getProductsSmall().then(products => &#123;
			this.products = products;
		&#125;);
    &#125;

&#125;
</app-code>

<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
.product-item &#123;
    .product-item-content &#123;
        border: 1px solid var(--surface-d);
        border-radius: 3px;
        margin: .3rem;
        text-align: center;
        padding: 2rem 0;
    &#125;

    .product-image &#123;
        width: 50%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-carousel-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
     </p-tabView >
</div>
